body{
    background-color:#667;
    color:white;
}

header{
    width:1280px;
    height:30px;
    margin:0px auto;
}

header #logo{
    font-size:30px;
    font-weight:bold;
}

.container{
    width:1280px;
    height:720px;
    margin:0px auto;
}

footer{
    clear:both;
    text-align:center;
    width:1280px;
    height:60px;
    margin:10px auto;
}

/*登录区域*/
#login_page{
    display:block;
    float:left;
    width:1280px;
    height:720px;
    margin:0px auto;
}

#login_page #loginSplash{
text-align:center;
    width:1000px;
    height:500px;
    margin:0px auto;
    padding-top:50px;
}

#login_page #loginSplash #title{
    display:block;
    text-align:center;
    font-size:50px;
    font-weight:bold;
}

#login_page #loginSplash #subtitle{
    display:block;
    font-size:30px;
    text-align:center;
}
#login_page #loginSplash #description{
    text-align:left;
    font-size:16px;
    padding-top:0px;
    line-height:10px;
}

#login_page #loginSection{
    width:100%;
    height:30%;
    text-align:center;
    margin:0px auto;
}

/*大厅区域*/
#lobby_page{
    display:none;
    float:left;
    width:1280px;
    height:720px;
    margin:0px auto;
}

#lobby_page #rooms{
    float:left;
    width:1000px;
    height:500px;
    border:solid 2px #334;
    background-color:#bcc;
}

#lobby_page #rooms div{
    overflow:hidden;
    text-align:center;
    border-radius:5px;
    padding:10px;
    float:left;
    width:206px;
    height:100px;
    margin:5px;
    border:solid 2px #334;
    background-color:#556;
}

#lobby_page #rooms div:hover{
    border:solid 2px mediumSlateBlue;
    cursor:pointer;
    background-color:#669;
}

#lobby_page #rooms div #roomNum{
    font-size:20px;
    font-weight:bold;
}
    
#lobby_page #playerList{
    float:right;
    width:272px;
    height:500px;
    border:solid 2px #334;
}

#lobby_page #playerList #playerInfoListTitle{
    font-size:24px;
    font-weight:bold;
    text-align:center;
    background-color:#88a;
    color:white;
    padding:5px 5px;
    width:260px;
    height:30px;
}

#lobby_page #playerList #playerInfoList{
    padding:5px;
    overflow:auto;
    width:256px;
    height:446px;
    border:solid 2px #88a;
    background-color:#dde;
}

#lobby_page #playerList #playerInfoList span{
    display:block;
    padding:5px 10px;
    text-align:center;
    margin-bottom:5px;
    color:#668;
    font-weight:bold;
}

#lobby_page #playerList #playerInfoList span:hover{
    display:block;
    color:#99d;
    cursor:pointer;
}

#lobby_page #playerList #playerInfoList span:nth-child(odd){
    background-color:#eef;
}
#lobby_page #playerList #playerInfoList span:nth-child(even){
    background-color:#fff;
}

#lobby_page #messageList{
    float:left;
    width:1000px;
    height:212px;
    border:solid 2px #334;
}

#lobby_page #messageList #messageInfoList{
    color:#334;
    background-color:#dde;
    padding:5px;
    float:left;
    overflow:auto;
    width:986px;
    height:162px;
    border:solid 2px #334;
}

#lobby_page #messageList #messageInfoList div{
    
}

.system{
    color:#448;
    font-weight:bold;
}

.systeminroom{
    color:#aad;
    font-weight:bold;
}

#lobby_page #messageList #inputMessageText{
    clear:both;
    display:block;
    font-size:16px;
    width:996px;
    height:32px;
    resize:none;
    background-color:#ddf;
    border:0px;
    color:#334;
    margin:0px auto;
}

#lobby_page #controls{
    float:right;
    width:272px;
    height:212px;
}

.lobbyButton{
    color:#ddf;
    font-size:24px;
    font-weight:bold;
    background-color:#556;
    text-align:center;
    width:250px;
    height:42px;
    line-height:42px;
    margin:7px auto;
    border:solid 2px #cce;
}

.lobbyButton:hover{
    cursor:pointer;
    color:#eef;
    background-color:#667;
    border:solid 2px #aaf;
}

#noroom{
    display:block;
    font-size:50px;
    font-weight:bold;
    text-align:center;
    line-height:200px;
    vertical-align:middle;
    width:100%;
    height:100%;
    background-color:gray;
    opacity:0.5;
}

/*游戏页面*/
#game_page{
    display:none;
    width:1280px;
    height:720px;
}

/*最左边*/
#game_page #mostLeft{
    width:380px;
    height:716px;
    float:left;
    border:solid 2px #334;
}

#game_page #mostLeft #mostLeftTop{
    color:#ddf;
    padding:0px 5px;
    font-size:20px;
    font-weight:bold;
    line-height:40px;
    width:100%;
    height:40px;
    background-color:#778;
}

#game_page #mostLeft #blackCardTop{
    display:none;
    float:left;
    width:378px;
    height:260px;
    background-color:#222;
}

    
#game_page #mostLeft #blackCardTop #gameStartButton{
    margin:60px auto;
    width:300px;
    height:120px;
    font-size:30px;
    text-align:center;
    font-weight:bold;
    line-height:120px;
    background-color:#975;
    border-radius:10px;
    border:solid 2px #222;
}

#game_page #mostLeft #blackCardTop #gameStartButton:hover{
    box-shadow:0px 0px 10px #fa8;
    cursor:pointer;
    background-color:#fa8;
    border:solid 2px white;
}

#game_page #mostLeft #blackCard{
    width:378px;
    height:260px;
    padding:10px;
}

#game_page #mostLeft #blackCard #blackCardContent{
    display:none;
    font-size:20px;
    padding:10px;
    width:290px;
    height:200px;
    color:white;
    background-color:#222;
    margin:0px auto;
    margin-bottom:0px;
    border:solid 2px #334;
}

#preview{
    color:#fea;
}

#game_page #mostLeft #chatInfo{
    padding:5px;
    color:#ccd;
    width:370px;
    height:352px;
    overflow:auto;
    background-color:transparent;
}

#game_page #mostLeft #chatMessage{
    display:block;
    width:376px;
    height:28px;
    resize:none;
}

/*中间*/
#game_page #middle{
    width:608px;
    height:716px;
    float:left;
    border:solid 2px #334;
    background-color:#pink;
}

/*左边*/
#game_page #left{
    width:304px;
    height:716px;
    float:left;
    background-color:#889;
}

#game_page #left #leftTop{
    color:#ddf;
    font-size:24px;
    font-weight:bold;
    line-height:40px;
    text-align:center;
    width:100%;
    height:40px;
    background-color:#445;
}

#game_page #left .cardSlot{
    display:block;
    color:black;
    width:280px;
    height:85px;
    margin:10px auto;
    background-color:#ddd;
    border:solid 2px #334;
}

#game_page #left .cardSlot:hover{
    color:#44f;
    border:solid 2px #aac;
    cursor:pointer;
    box-shadow: 0px 0px 8px #aaf;
}

#game_page #left .cardSlot #single{
    width:270px;
    height:75px;
    text-align:center;
    font-size:20px;
    padding:5px;
}

#game_page #left .cardSlot #double{
    margin:5px;
    float:left;
    width:120px;
    height:75px;
    text-align:center;
    font-size:20px;
}

/*右边*/
#game_page #right{
    width:304px;
    height:716px;
    float:left;
    background-color:#667;
}

#game_page #right #rightCover{
    display:none;
    position:absolute;
    width:304px;
    height:716px;
    opacity:0.5;
    color:white;
    font-size:40px;
    font-weight:bold;
    text-align:center;
    line-height:716px;
    background-color:#644;
}

#game_page #right #rightTop{
    color:#ddf;
    font-size:24px;
    font-weight:bold;
    line-height:40px;
    text-align:center;
    width:100%;
    height:40px;
    background-color:#334;
}

#game_page #right .handCardSlot{
    font-size:20px;
    text-align:center;
    color:black;
    width:280px;
    height:71px;
    margin:9px auto;
    color:black;
    background-color:#ddd;
    border:solid 2px gray;
}

#game_page #right .sent {
    background-color:#555;
}

#game_page #right .handCardSlot:hover{
    cursor:pointer;
    background-color:#bbe;
    box-shadow: 0px 0px 8px #aaf;
}

/*最右边*/
#game_page #mostRight{
    width:280px;
    height:716px;
    float:left;
    border:solid 2px #334;
}

/*玩家列表*/
#game_page #mostRight #playerList{
    width:278px;
    height:402px;
    float:left;
    border:solid 2px #334;
}

#game_page #mostRight #playerList .playerSlotContainer{
    font-size:16px;
    line-height:44px;
    margin:2px auto;
    width:270px;
    height:44px;
    border:solid 2px #334;
    color:#334;
    background-color:#bbf;
}

#game_page #mostRight #playerList .sent{
    background-color:#aaa;
}

#game_page #mostRight #playerList .playerSlotContainer:hover{
    color:white;
    background-color:#77f;
    cursor:pointer;
}

#game_page #mostRight #playerList .playerPoint{
    float:left;
    line-height:30px;
    padding:2px;
    margin:5px;
    height:30px;
    color:#fff;
    text-align:center;
    background-color:#aaf;
    font-size:16px;
    border-radius:5px;
}

#game_page #mostRight #playerList .playerSlotContainer .badger{
    float:right;
    line-height:30px;
    padding:2px;
    margin-right:4px;
    margin-top:5px;
    height:30px;
    color:#fff;
    text-align:center;
    background-color:#b85;
    font-size:16px;
    border-radius:5px;
}

#game_page #mostRight #playerList .playerSlot{
    overflow:auto;
    width:200px;
    height:44px;
    float:left;
}
/*玩家列表结束*/

#game_page #mostRight #spectatorList{
    width:278px;
    height:266px;
    float:left;
    border:solid 2px #334;
    overflow:auto;
}

#game_page #mostRight #spectatorList .spectatorSlot{
    color:#dde;
    margin:2px auto;
    width:270px;
    height:32px;
    border:solid 2px gray;
    background-color:#556;
    text-align:center;
    line-height:32px;
}

#game_page #mostRight #gameButtons{
    width:100%;
    height:34px;
}

#game_page #mostRight .inroomButton{
    float:left;
    color:#334;
    text-align:center;
    line-height:36px;
    background-color:#aac;
    width:136px;
    height:36px;
    border:solid 2px #334;
}

#game_page #mostRight .inroomButton:hover{
    cursor:pointer;
    background-color:#bbf;
    color:#558;
    border:solid 2px #f97;
}

.cardAuthor{
    display:none;
}

.cardSlot .cardAuthor{
    display:block;
    color:gray;
    position:relative;
    width:200px;
    height:20px;
    right:-60px;
    bottom:-24px;
    font-size:16px;
    text-align:right;
}
